<template>
	<view class="detail-box">
		<!-- 商品图片 -->
		<view class="good-pic">
			<image :src="goodDetail.cover" mode="widthFix"></image>
		</view>
		<!-- 商品基本信息 -->
		<view class="good-basic-info">
			<view class="good-title">{{goodDetail.title}}</view>
			<view class="good-desc">{{goodDetail.desc}}</view>
			<view class="good-price">{{goodDetail.price}}</view>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<view class="good-desc">销量：{{goodDetail.sales}}</view>
				</uni-col>
				<uni-col :span="12">
					<view class="good-desc">库存：{{goodDetail.stock}}</view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 商品规格 -->
		<view>
			<uni-list border-full>
				<uni-list-item>
					<!-- 自定义 header -->
					<template v-slot:header>
						<view>
							<text>规格:{{goodDetail.goodDetail.guige}}</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<!-- 自定义 header -->
					<template v-slot:header>
						<view>
							<text>品牌:{{goodDetail.goodDetail.pinpai}}</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<!-- 自定义 header -->
					<template v-slot:header>
						<view>
							<text>服务:{{goodDetail.goodDetail.fuwu}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 商品评价 -->
		<view style="margin: 10upx 0;">
			<uni-list border-full>
				<uni-list-item showArrow title="商品评价" rightText="查看" />
			</uni-list>
		</view>
		<!-- 商品详情 -->
		<view class="detail-info">
			<view style="text-align: center;font-size: 32upx;line-height: 80upx;">图文详情</view>
			<!-- 这个里面放的是一些富文本信息 -->
			<rich-text :nodes="goodDetail.goodDetail.info"></rich-text>
		</view>
		<!-- 底部商品购物详情 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import http from '../../api/request.js'
	export default {
		data() {
			return {
				goodDetail: {
					"cover": "https://file.boyoulsh.com/ywh/1.png",
					"desc": "大凉山苹果1",
					"group": 1,
					"id": 1,
					"is_delete": false,
					"is_on": true,
					"price": "5.00",
					"recommend": true,
					"stock": 256,
					"sales": 3,
					"title": "苹果1",
					"goodDetail": {
						"guige": "123123",
						"pinpai": "123123",
						"fuwu": "123123",
						"info": "<p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p>"
					}
				},
				options: [{
					icon: 'star',
					text: '收藏'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #55aa00, #499300)',
						color: '#fff'
					},
					// {
					// 	text: '立即购买',
					// 	backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					// 	color: '#fff'
					// }
				],

			}
		},
		methods: {
			//获取商品详情
			async getGoodDetail() {
				const response = await this.$api.goods.getGoodDetail()
				if (response.statusCode === 200) {
					this.goodDetail = response.goodDetail
				}
			},
			//点击收藏或者加入购物车调用 
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			//加入购物车调用 
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}
		},
		onLoad(option) {
			console.info(option)
			// this.getGoodDetail(option.id);
		}
	}
</script>

<style lang="scss">
	.detail-box {
		.good-pic {
			text-align: center;

			image {
				width: 100%;
			}
		}

		.good-basic-info {
			background: #fff;
			padding: 30upx;

			.good-title {
				font: normal 30upx/80upx "微软雅黑";
			}

			.good-desc {
				color: #818181;
			}

			.good-price {
				color: #ff557f;
				font-size: 40upx;
				line-height: 80upx;
			}
		}

		.detail-info {
			background: #fff;
		}

		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}
	}
</style>